<html>
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
      rel="stylesheet"
    />
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
    <style>
      body {
        /* background: rgb(221, 208, 208); */
        /* background:#333; */
        font-family: 'Arial';
        /* font-size: 18px !important; */
        width: 100%;
        }
      h1 { color: grey;}
      .mermaid2,.mermaid3 {
        display: none;
      }
      .mermaid svg {
        /* font-size: 18px !important; */
      }
    </style>
  </head>
  <body>
    <div>info below</div>
    <div class="flex flex-wrap">

<div class="mermaid2" style="width: 100%; height: 20%;">
classDiagram
  direction TB
  class Student {
    -idCard : IdCard
  }
  class IdCard{
    -id : int
    -name : string
  }
  class Bike{
    -id : int
    -name : string
  }
  Student "1" --o "1" IdCard : carries
  Student "1" --o "1" Bike : rides

</div>
<div class="mermaid3" style="width: 100%; height: 20%;">
stateDiagram
  state CompositeState {
      YourState123456789012345123456789123456789012345123456789123456789012345123456789123456789012345123456789 --> MyState:a label
    }

</div>
<div class="mermaid" style="width: 100%; height: 20%;">
sequenceDiagram
  %%{init: {'config': {'wrap': true }}}%%
  actor Alice as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
  actor Bob
  participant John as John2
  participant Mandy
  Alice->>Bob: Hi Bob
  Bob->>Alice: Hi Alice
  Alice->>John: Hi John
  John->>Mandy: Hi Mandy
  Mandy ->>Joan: Hi Joan

</div>
<div class="mermaid" style="width: 100%; height: 20%;">
%%{int: { "apa":"b", "theme":"forest"}}%%
sequenceDiagram
Alice->>Bob: Hi Bob
Bob->>Alice: Hi Alice
</div>
<div class="mermaid">
sequenceDiagram
  autonumber
  par Action 1
    Alice->>John: Hello John, how are you?
  and Action 2
    Alice->>Bob: Hello Bob, how are you?
  end
  Alice->>+John: Hello John, how are you?
  Alice->>+John: John, can you hear me?
  John-->>-Alice: Hi Alice, I can hear you!
  Note right of John: John is perceptive
  John-->>-Alice: I feel great!
      loop Every minute
        John-->Alice: Great!
    end
</div>
<div class="mermaid">
sequenceDiagram
  %%{init: {'config': {'wrap': true }}}%%
  actor Alice
  actor Bob
  Alice->>Bob: Hi Bob
  Bob->>Alice: Hi Alice
</div>
<div class="mermaid" style="width: 100%; height: 20%;">
        %%{init: {'config': {'wrap': true }}}%%
        sequenceDiagram
        participant A as Extremely utterly long line of longness which had preivously overflown the actor box as it is much longer than what it should be
        A->>Bob: Hola
        Bob-->A: Pasten !
  </div>
<div class="mermaid2" style="width: 100%; height: 20%;">
stateDiagram-v2
state CS {
state ACS {
YourState
}
}
  </div>
<div class="mermaid2" style="width: 100%; height: 20%;">
      stateDiagram-v2
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.

        SomethingElse --> [*]  </div>
  <script src="./mermaid.js"></script>
    <script>
      mermaid.parseError = function (err, hash) {
          // console.error('Mermaid error: ', err);
        };
      mermaid.initialize({
        // theme: 'dark',
        theme: 'forest',
        arrowMarkerAbsolute: true,
        // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
        logLevel: 2,
        flowchart: { nodeSpacing: 10, curve: 'cardinal', htmlLabels: false },
        // gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorFontFamily: 'courier',actorMargin: 50, showSequenceNumbers: false },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
        // fontFamily: '"times", sans-serif',
        // fontFamily: 'courier',
        state:{
          nodeSpacing: 50,
          rankSpacing: 50,
          defaultRenderer: 'dagre-wrapper',
        },
        logLevel:0,
        fontSize: 18,
        curve: 'cardinal',
        securityLevel: 'strict',
        // themeVariables: {relationLabelColor: 'red'}
      });
      function callback(){alert('It worked');}
    </script>
  </body>
</html>
